<template>
  <view class="home-page">
    <view class="header">
      <view class="logo">
        <view class="icon">🌊</view>
        <text class="title">鸣潮 · 溢彩画</text>
      </view>
      
      <view class="user-info" v-if="userStore.isLoggedIn">
        <text class="username">欢迎，{{ userStore.userInfo.username }}</text>
        <view class="score">
          <text class="icon">⭐</text>
          <text class="value">{{ gameStore.totalScore }}</text>
        </view>
      </view>
    </view>
    
    <view class="game-intro">
      <text class="intro-title">游戏介绍</text>
      <text class="intro-content">
        《鸣潮 · 溢彩画》是一款基于色彩填充的策略小游戏。通过选择颜色，将相连的同色块一起染色，
        目标是在规定步数内将所有色块变为目标颜色。
      </text>
    </view>
    
    <view class="difficulty-preview">
      <view class="difficulty-item">
        <view class="icon easy">😊</view>
        <text class="name">简单</text>
        <text class="desc">6×6网格，3-4种颜色</text>
      </view>
      
      <view class="difficulty-item">
        <view class="icon medium">😐</view>
        <text class="name">中等</text>
        <text class="desc">8×8网格，5-6种颜色</text>
      </view>
      
      <view class="difficulty-item">
        <view class="icon hard">😠</view>
        <text class="name">困难</text>
        <text class="desc">10×10网格，7-8种颜色</text>
      </view>
    </view>
    
    <button class="start-btn" @click="navigateToDifficulty">
      开始游戏
    </button>
    
    <view class="quick-links">
      <button class="link-btn" @click="navigateToRanking">
        <text class="icon">🏆</text>
        <text>排行榜</text>
      </button>
      
      <button class="link-btn" @click="navigateToRewards">
        <text class="icon">🎁</text>
        <text>奖励中心</text>
      </button>
      
      <button class="link-btn" @click="showHelp">
        <text class="icon">❓</text>
        <text>游戏帮助</text>
      </button>
      
      <button class="link-btn" v-if="userStore.isLoggedIn" @click="handleLogout">
        <text class="icon">🚪</text>
        <text>退出登录</text>
      </button>
      
      <button class="link-btn" v-else @click="navigateToLogin">
        <text class="icon">🔑</text>
        <text>登录/注册</text>
      </button>
    </view>
    
    <view class="ranking-preview" v-if="topRankings.length > 0">
      <text class="preview-title">排行榜预览</text>
      <view class="top-players">
        <ranking-item 
          v-for="(user, index) in topRankings" 
          :key="index"
          :rank="index + 1"
          :user="user"
        ></ranking-item>
      </view>
      <button class="view-all" @click="navigateToRanking">
        查看全部
      </button>
    </view>
  </view>
</template>

<script setup>
import { computed, onMounted } from 'vue'
import { useUserStore } from '@/store/user'
import { useGameStore } from '@/store/game'
import RankingItem from '@/components/ranking-item.vue'

const userStore = useUserStore()
const gameStore = useGameStore()

// 初始化状态
onMounted(() => {
  userStore.initUserState()
  gameStore.initGameState()
})

// 获取排行榜前三名
const topRankings = computed(() => {
  return userStore.rankings.slice(0, 3)
})

// 导航方法
const navigateToDifficulty = () => {
  if (!userStore.isLoggedIn) {
    uni.navigateTo({ url: '/pages/login/login' })
    return
  }
  uni.navigateTo({ url: '/pages/difficulty-select/difficulty-select' })
}

const navigateToRanking = () => {
  if (!userStore.isLoggedIn) {
    uni.navigateTo({ url: '/pages/login/login' })
    return
  }
  uni.navigateTo({ url: '/pages/ranking/ranking' })
}

const navigateToRewards = () => {
  if (!userStore.isLoggedIn) {
    uni.navigateTo({ url: '/pages/login/login' })
    return
  }
  uni.navigateTo({ url: '/pages/rewards/rewards' })
}

const navigateToLogin = () => {
  uni.navigateTo({ url: '/pages/login/login' })
}

const handleLogout = () => {
  userStore.logout()
  uni.showToast({
    title: '已退出登录',
    icon: 'none'
  })
}

const showHelp = () => {
  uni.showModal({
    title: '游戏帮助',
    content: `玩法说明：点击任意格子选中它，然后选择颜色进行填充，相邻的相同颜色会一起被染色。目标是在规定步数内将所有色块变为目标颜色。
    
积分规则：
- 根据完成步数与最优步数的比例计算积分
- 步数越少，获得积分越高（最高150%倍率）
- 使用提示会降低积分（每次提示减10%）
- 连续通关可获得额外积分奖励`,
    showCancel: false
  })
}
</script>

<style scoped>
.home-page {
  background-color: #1a1a2e;
  min-height: 100vh;
  padding: 24rpx;
}

.header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 32rpx;
}

.logo {
  text-align: center;
  margin-bottom: 16rpx;
}

.icon {
  font-size: 96rpx;
  margin-bottom: 16rpx;
}

.title {
  font-size: 48rpx;
  font-weight: bold;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  background-image: linear-gradient(to right, #6C5CE7, #00D2D3);
  display: block;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 24rpx;
  background-color: rgba(30, 30, 50, 0.5);
  padding: 12rpx 24rpx;
  border-radius: 32rpx;
  width: 100%;
  max-width: 600rpx;
  justify-content: space-between;
}

.username {
  font-size: 28rpx;
  color: #fff;
}

.score {
  display: flex;
  align-items: center;
  gap: 8rpx;
  color: #FFD700;
  font-weight: bold;
}

.game-intro {
  background-color: rgba(30, 30, 50, 0.5);
  padding: 24rpx;
  border-radius: 16rpx;
  margin-bottom: 32rpx;
}

.intro-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #fff;
  display: block;
  margin-bottom: 16rpx;
}

.intro-content {
  font-size: 26rpx;
  color: #ccc;
  line-height: 1.5;
}

.difficulty-preview {
  display: flex;
  gap: 16rpx;
  margin-bottom: 32rpx;
  overflow-x: auto;
  padding-bottom: 16rpx;
}

.difficulty-item {
  flex: 1;
  min-width: 200rpx;
  background-color: rgba(30, 30, 50, 0.5);
  padding: 24rpx;
  border-radius: 16rpx;
  text-align: center;
}

.difficulty-item .icon {
  font-size: 64rpx;
  margin-bottom: 16rpx;
}

.difficulty-item .name {
  font-size: 28rpx;
  font-weight: bold;
  color: #fff;
  display: block;
  margin-bottom: 8rpx;
}

.difficulty-item .desc {
  font-size: 24rpx;
  color: #aaa;
}

.start-btn {
  width: 100%;
  background-color: #6C5CE7;
  color: #fff;
  padding: 24rpx;
  border-radius: 16rpx;
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 32rpx;
}

.quick-links {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16rpx;
  margin-bottom: 32rpx;
}

.link-btn {
  background-color: rgba(30, 30, 50, 0.5);
  color: #fff;
  padding: 20rpx;
  border-radius: 16rpx;
  font-size: 28rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12rpx;
}

.ranking-preview {
  background-color: rgba(30, 30, 50, 0.5);
  padding: 24rpx;
  border-radius: 16rpx;
}

.preview-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #fff;
  display: block;
  margin-bottom: 16rpx;
}

.top-players {
  margin-bottom: 16rpx;
}

.view-all {
  width: 100%;
  background-color: transparent;
  color: #6C5CE7;
  padding: 12rpx;
  font-size: 26rpx;
  border: 1px solid #6C5CE7;
  border-radius: 8rpx;
}
</style>